<template>
  <!-- 权限设置对话框 -->
  <el-dialog title="权限设置" :model-value="permissionDialog.visible" @update:model-value="(val) => emit('update:permissionDialog', { ...permissionDialog, visible: val })" width="800px" append-to-body>
    <el-form label-width="120px">
      <el-form-item label="主题名称">
        <el-input v-model="permissionForm.topicName" readonly />
      </el-form-item>
      <el-form-item label="发布权限">
        <el-checkbox-group v-model="permissionForm.publishRoles">
          <el-checkbox label="admin">管理员</el-checkbox>
          <el-checkbox label="device">设备</el-checkbox>
          <el-checkbox label="user">普通用户</el-checkbox>
          <el-checkbox label="guest">访客</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="订阅权限">
        <el-checkbox-group v-model="permissionForm.subscribeRoles">
          <el-checkbox label="admin">管理员</el-checkbox>
          <el-checkbox label="device">设备</el-checkbox>
          <el-checkbox label="user">普通用户</el-checkbox>
          <el-checkbox label="guest">访客</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="IP白名单">
        <el-input v-model="permissionForm.ipWhitelist" type="textarea" :rows="3" placeholder="请输入IP地址，多个用换行分隔" />
      </el-form-item>
      <el-form-item label="客户端白名单">
        <el-input v-model="permissionForm.clientWhitelist" type="textarea" :rows="3" placeholder="请输入客户端ID，多个用换行分隔" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleSave">保 存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
// Props
interface Props {
  permissionDialog: {
    visible: boolean
  }
  permissionForm: {
    topicName: string
    publishRoles: string[]
    subscribeRoles: string[]
    ipWhitelist: string
    clientWhitelist: string
  }
}

const props = defineProps<Props>()

// Emits
const emit = defineEmits(['update:permissionDialog', 'update:permissionForm', 'save', 'cancel'])

// 处理保存
const handleSave = () => {
  emit('save')
}

// 处理取消
const handleCancel = () => {
  emit('cancel')
}
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}
</style>